<template>
<div class="form-horizontal">
  <slot name="datetime">
    <div class="form-group">
      <label for="picker1" class="col-sm-3 control-label">
        A default datetime picker:
      </label>
      <div class="col-sm-5">
        <vue-datetime-picker class="vue-picker1" name="picker1"
                             :model.sync="result1" language="zh-CN">
        </vue-datetime-picker>
      </div>
      <div class="col-sm-4">
        <p class="form-control-static">
          Selected Datetime: <span class="vue-result1">{{formatDatetime(result1)}}</span>
        </p>
      </div>
    </div>
  </slot>
  <slot name="LLL">
    <div class="form-group">
      <label for="picker2" class="col-sm-3 control-label">
        A datetime picker with customized datetime format:
      </label>
      <div class="col-sm-5">
        <vue-datetime-picker class="vue-picker2" name="picker2"
                             :model.sync="result2"
                             type="datetime"
                             language="en"
                             datetime-format="LLL">
        </vue-datetime-picker>
      </div>
      <div class="col-sm-4">
        <p class="form-control-static">
          Selected Datetime: <span class="vue-result2">{{formatDatetime(result2)}}</span>
        </p>
      </div>
    </div>
  </slot>
  <slot name="L">
    <div class="form-group">
      <label for="picker3" class="col-sm-3 control-label">
        A date picker with customized date format:
      </label>
      <div class="col-sm-5">
        <vue-datetime-picker class="vue-picker3" name="picker3"
                             :model.sync="result3"
                             type="date"
                             language="en-US"
                             date-format="L">
        </vue-datetime-picker>
      </div>
      <div class="col-sm-4">
        <p class="form-control-static">
          Selected Date: <span class="vue-result3">{{formatDate(result3)}}</span>
        </p>
      </div>
    </div>
  </slot>
  <slot name="TL">
    <div class="form-group">
      <label for="picker4" class="col-sm-3 control-label">
        A time picker with customized time format:
      </label>
      <div class="col-sm-5">
        <vue-datetime-picker class="vue-picker4" name="picker4"
                             :model.sync="result4"
                             type="time"
                             language="zh-CN"
                             time-format="LT">
        </vue-datetime-picker>
      </div>
      <div class="col-sm-4">
        <p class="form-control-static">
          Selected Time: <span class="vue-result4">{{formatTime(result4)}}</span>
        </p>
      </div>
    </div>
  </slot>
  <!-- <div class="form-group">
    <p class="form-control-static col-sm-12">
      Demonstration of the range of datetime. Note how the minimum/maximum
      selectable datetime of the start/end datetime picker was changed
      according to the selection of another picker.
    </p>
  </div>
  <div class="form-group">
    <label for="start-picker" class="col-sm-3 control-label">
      Start Datetime:
    </label>
    <div class="col-sm-3">
      <vue-datetime-picker class="vue-start-picker" name="start-picker"
                           v-ref:start-picker
                           :model.sync="startDatetime"
                           :on-change="onStartDatetimeChanged">
      </vue-datetime-picker>
    </div>
    <label for="end-picker" class="col-sm-3 control-label">
      End Datetime:
    </label>
    <div class="col-sm-3">
      <vue-datetime-picker class="vue-end-picker" name="end-picker"
                           v-ref:end-picker
                           :model.sync="endDatetime"
                           :on-change="onEndDatetimeChanged">
      </vue-datetime-picker>
    </div>
  </div> -->
</div>
</template>

<script>
export default {
  props: {
    result1: {
      required: true,
      twoWay: true
    },
    result2: {
      required: true,
      twoWay: true
    },
    result3: {
      required: true,
      twoWay: true
    },
    result4: {
      required: true,
      twoWay: true
    },
    startDatetime: {
      required: true,
      twoWay: true
    },
    endDatetime: {
      required: true,
      twoWay: true
    }
  },
  methods: {
    formatDatetime (datetime) {
      if (datetime === null) {
        return '[null]'
      } else {
        return datetime.format('YYYY-MM-DD HH:mm:ss')
      }
    },
    formatDate (date) {
      if (date === null) {
        return '[null]'
      } else {
        return date.format('YYYY-MM-DD')
      }
    },
    formatTime (time) {
      if (time === null) {
        return '[null]'
      } else {
        return time.format('HH:mm:ss')
      }
    },
    onStartDatetimeChanged (newStart) {
      var endPicker = this.$refs.endPicker.control
      endPicker.minDate(newStart)
    },
    onEndDatetimeChanged (newEnd) {
      var startPicker = this.$refs.startPicker.control
      startPicker.maxDate(newEnd)
    }
  },
  components: {
    'vue-datetime-picker': require('vue-datetime-picker/src/vue-datetime-picker.js')
  }
}
</script>

<style lang="less">
@import '../vendors/datetime-picker/less/bootstrap-datetimepicker-4.17.37.less';
// @import 'https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css';
@import '../vendors/datetime-picker/less/font-awesome-4.4.0.less';
</style>